<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import router from "@/router";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import moment from "moment/moment";
//用于储存站点区域选项的数组
const stationArea=ref([{area:'东城区',value:'东城区'},{area:'西城区',value:'西城区'},{area:'朝阳区',value:'朝阳区'},{area:'海淀区',value:'海淀区'},{area:'大兴区',value:'大兴区'},
  {area:'丰台区',value:'丰台区'},{area:'石景山区',value:'石景山区'},{area:'门头沟区',value:'门头沟区'},{area:'通州区',value:'通州区'},{area:'房山区',value:'房山区'},{area:'延庆区',value:'延庆区'},
  {area:'昌平区',value:'昌平区'},{area:'顺义区',value:'顺义区'},{area:'怀柔区',value:'怀柔区'},{area:'密云区',value:'密云区'},{area:'平谷区',value:'平谷区'}]);
//加载某个站点信息的对象
const stationInfo=ref({
  id:'',
  stationName:'',
  stationLocation:'',
  stationPosition:'',
  createTime:'',
  bindVehicleList:[]
})
//管理车辆检索信息
const searchVehicleInfo=ref({license:'',name:'',brand:'',model:''});
//存放车辆所有的型号
const vehicleModelOption=ref([
  {label:'小轿车',value:10},{label:'中大型轿车',value:20},{label:'SUV',value:30},{label:'跑车',value:40},{label:'皮卡',value:50},
  {label:'面包车',value:60},{label:'公交车',value:70}
])
//车辆绑定弹窗可视参数
const bindDialogVisible=ref(false);
//编辑站点弹窗的标题
const stationDialogTitle=ref("编辑站点信息");
//编辑站点弹窗可视参数
const stationDialogVisible=ref(false);
//用于储存更新完成之前的原来的站点数据
let backUpStationInfo={};
//车辆管理弹窗可视参数
const manageDialogVisible=ref(false);
//储存查询回来的可绑定车辆的数据的数组
const vehicleInfoList=ref([]);
//用于从后端数据库查询可绑定车辆信息的方法
const getVehicleInfo=()=>{
  bindDialogVisible.value=true;
  axios.get(BASE_URL+'/vehicle/getVehicle')
      .then((response)=>{
        if (response.data.code == 2000){
          vehicleInfoList.value=[];
          vehicleInfoList.value=response.data.data;
          console.log(vehicleInfoList);
        }
        else {
          ElMessage.error(response.data.msg);
        }
      })
}
//用于储存被选中绑定车辆信息的数组
const selectedVehicle=ref([]);
// 加载站点信息时用于接收站点数据的数组
const stationList=ref([]);
//用于记录查询内容
const searchContent=ref({
  id:'',
  stationName:'',
  stationLocation:''
})
//从后端加载站点信息的方法,同时根据查询条件查询站点
const loadStation=()=>{
  console.log(searchContent.value);
  let data=qs.stringify(searchContent.value);
  stationList.value=[];
  axios.get(BASE_URL+'/station/load?'+data)
      .then((response)=>{
        if (response.data.code == 2000){
          if (response.data.data.length==0){
            ElMessage.warning("很抱歉，没有您查询的站点，请查询其他消息");
            return;
          }
          stationList.value=response.data.data;
        }
        else {
          ElMessage.error(response.data.msg);
        }
      })
}
//重置查询内容的方法
const resetSearchContent=()=>{
  searchContent.value={id:'', stationName:'', stationLocation:''};
  loadStation();
}
//编辑站点信息的方法
const editStation=(index,id)=>{
  stationInfo.value={
    id:'',
    stationName:'',
    stationLocation:'',
    stationPosition:'',
    createTime:'',
    bindVehicleList:[]};
  stationInfo.value=stationList.value[index];
  backUpStationInfo=stationList.value[index];
  backUpStationInfo.index=index;
  stationInfo.value.id=id;
  stationDialogVisible.value=true;
  console.log(stationInfo.value);
}
//用于实时同步绑定车辆信息的方法，当表格中的selection变化时，随时改变内容
const handleSelectChange=(selection)=>{
  selectedVehicle.value=selection;
  console.log(selectedVehicle.value);
}
//用于记录绑定车辆的id，传递回后端
let bindVehicleList=[];
//移交绑定车辆信息，遍历被选中绑定车辆信息的数组，将选中的车辆信息同步进站点信息的绑定车辆列表中，展示在弹窗上
const commitBindVehicle=()=>{
  for (const vehicle of selectedVehicle.value){
    stationInfo.value.bindVehicleList.push(vehicle);
  }
  bindDialogVisible.value=false;
  console.log(stationInfo.value.bindVehicleList);
}
//将站点信息的绑定车辆列表中的车辆id进行存储，传递至后端进行车辆数据的更新
const getBindVehicleId=()=>{
  bindVehicleList=[];
  for (const bindVehicle of stationInfo.value.bindVehicleList){
    bindVehicleList.push(bindVehicle.id);
  }
}
//在页面加载时执行查询站点信息的方法
onMounted(
    ()=>{
      loadStation();
    }
)
//在点击新建站点时跳转至地图页面
const toMapMark=()=>{
  router.push("/pointMark");
}
//用于更新站点信息的方法，更新提交修改按钮后，将修改后的站点信息传递至后端，进行数据更新
const updateStationInfo=()=>{
  getBindVehicleId();
  stationInfo.value.bindVehicleList=[];
  stationInfo.value.bindVehicleList=bindVehicleList;
  console.log(stationInfo.value);
  let data=qs.stringify(stationInfo.value);
  axios.post(BASE_URL+"/station/update",data)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("更改提交成功");
          stationDialogVisible.value=false;
          loadStation();
        }
        else {
          let index=backUpStationInfo.index;
          delete backUpStationInfo.index;
          stationInfo.value[index]=backUpStationInfo;
          backUpStationInfo={};
          stationDialogVisible.value=false;
        }
      })
}
//用于解除车辆绑定状态的方法，点击“解绑”后即可将对应id的车辆解除绑定
const removeBindVehicle=(index,id)=>{
  stationInfo.value.bindVehicleList.splice(index,1);
  bindVehicleList.splice(index,1);
  axios.post(BASE_URL+"/vehicle/unbindVehicle/"+id)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success("成功解绑车辆");
        }
        else {
          ElMessage.error(response.data.msg);
        }
      })
}
//显示管理已绑定车辆信息的方法，点击后可显示绑定车辆信息的弹窗
const editBindVehicle=()=>{
  manageDialogVisible.value=true;
  selectedVehicle.value=[];
  selectedVehicle.value=stationInfo.value.bindVehicleList;
}
//用于管理绑定车辆信息的弹窗的关闭的方法
const handleManageDialogClose=()=>{
  if (confirm("您确定要关闭车辆管理窗口么？")){
    manageDialogVisible.value=false;
    selectedVehicle.value=[];
  }
}
//用于管理编辑站点更新信息弹窗关闭的方法
const handleStationDialogClose=()=>{
  if (confirm("您确定要关闭站点编辑窗口么？")){}
  let index=backUpStationInfo.index;
  delete backUpStationInfo.index;
  stationInfo.value[index]=backUpStationInfo;
  backUpStationInfo={};
  stationInfo.value={
    id:'',
    stationName:'',
    stationLocation:'',
    stationPosition:'',
    createTime:'',
    bindVehicleList:[]};
  stationDialogVisible.value=false;
}
//用于重置车辆检索条件的方法
const resetSearchVehicle=()=>{
  searchVehicleInfo.value={license:'',name:'',brand:'',model:''};
  getVehicleInfo();
}
//根据条件检索可绑定车辆的信息
const searchVehicle=()=>{
  let data=qs.stringify(searchVehicleInfo.value);
  axios.get(BASE_URL+'/vehicle/getVehicle?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          vehicleInfoList.value=[];
          vehicleInfoList.value=response.data.data;
        }
        else {
          ElMessage.warning("没有您查询的车辆信息，请重新查询");
          vehicleInfoList.value=[];
        }
      })
}
//根据id删除对应站点信息及解绑车辆的方法
const removeStation=(id)=>{
  if (confirm("您确定要删除站点么？")){
    axios.post(BASE_URL+'/station/delete/'+id)
        .then((response)=>{
          if (response.data.code=2000){
            ElMessage.success("站点删除成功");
            loadStation();
          }
          else {
            ElMessage.error(response.data.msg);
          }
        })
  }
}




//站点更新时间格式转换方法
const dateFormatter=(row,column)=>{
  const date = row[column.property];
  return moment(date).format('YYYY-MM-DD');
}
//车辆型号格式转换方法
const modelFormatter=(row,column,cellValue,index)=>{
  if (cellValue==10){
    cellValue="小轿车";
  }
  else if (cellValue==20){
    cellValue="中大型轿车";
  }
  else if (cellValue==30){
    cellValue="SUV";
  }
  else if (cellValue==40){
    cellValue="跑车";
  }
  else if (cellValue==50){
    cellValue="皮卡";
  }
  else if (cellValue==60){
    cellValue="面包车";
  }
  else if (cellValue==70){
    cellValue="公交车";
  }
  return cellValue;
}
//车辆类型格式转换方法
const typeFormatter=(row,column,cellValue,index)=>{
  if (cellValue==10){
    cellValue="电车";
  }
  else if (cellValue==20){
    cellValue="油车";
  }
  return cellValue;
}
//车辆格式格式转换方法
const statusFormatter=(row,column,cellValue,index)=>{
  if (cellValue==1){
    cellValue="空闲";
  }
  else if (cellValue==2){
    cellValue="占用";
  }
  return cellValue;
}

</script>

<template>
  <div>
    <!--站点检索条件卡片-->
    <el-card>
      <el-form :inline="true" style="position: relative">
        <el-form-item label="站点名称">
          <el-input type="text" placeholder="请输入站点名称" v-model="searchContent.stationName"></el-input>
        </el-form-item>
        <el-form-item label="站点区域">
          <el-select placeholder="请选择站点所在区域" style="width: 200px;" v-model="searchContent.stationLocation" clearable>
            <el-option v-for="region in stationArea" :value="region.value">{{region.area}}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button type="info" @click="resetSearchContent">重置</el-button>
          <el-button type="primary" @click="loadStation">查询</el-button>
        </el-form-item>
        <el-form-item style="position: absolute;right: 10px">
          <el-button type="primary"  @click="toMapMark">新建站点</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--显示站点数据卡片-->
    <el-card>
      <el-table :data="stationList">
        <el-table-column type="index" label="序号" align="center" width="80px"/>
        <el-table-column label="站点名称" prop="stationName" align="center"/>
        <el-table-column label="站点位置" prop="stationLocation" align="center"/>
        <el-table-column label="站点坐标" prop="stationPosition" align="center"/>
        <el-table-column label="更新时间" prop="updateTime" :formatter="dateFormatter" align="center"/>
        <el-table-column label="绑定车辆" prop="bindVehicle" align="center"/>
        <el-table-column label="可用车辆" prop="usableVehicle" align="center"/>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editStation(scope.$index,scope.row.id)">编辑</el-button>
            <el-button link type="primary" size="small" @click="removeStation(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <!-- 编辑站点信息弹窗 -->
  <el-dialog :title="stationDialogTitle" v-model="stationDialogVisible" :before-close="handleStationDialogClose">
    <el-form label-position="top">
      <el-form-item label="站点名称">
        <el-input type="text" placeholder="请输入" style="width: 400px" v-model="stationInfo.stationName"></el-input>
      </el-form-item>
      <el-form-item label="站点位置">
        <el-input  type="text" v-model="stationInfo.stationLocation">
          <template #append>
            <el-button type="info" >
              <el-icon><MapLocation /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <div style="max-height: 50px;overflow: auto;width: 60%">
          <el-tag v-for="(vehicle,index) in stationInfo.bindVehicleList" @close="removeBindVehicle(index,vehicle.id)">{{vehicle.license}}</el-tag>
          <el-button class="button-new-tag" size="small" @click="editBindVehicle">管理绑定车辆</el-button>
        </div>
      </el-form-item>
      <el-form-item style="position: relative;left: 550px">
        <el-button type="primary" @click="updateStationInfo">提交更改</el-button>
        <el-button type="warning" @click="handleStationDialogClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 管理站点绑定车辆弹窗 -->
  <el-dialog title="绑定车辆管理弹窗" v-model="manageDialogVisible" width="80%" :before-close="handleManageDialogClose">
    <el-form>
      <el-form-item >
        <el-button  type="success" @click="getVehicleInfo">新增车辆</el-button>
      </el-form-item>
      <el-form-item>
        <el-table :data="stationInfo.bindVehicleList" style="height:500px;overflow: auto" >
          <el-table-column type="index" label="序号" width="70"/>
          <el-table-column label="车牌号" prop="license" align="center"/>
          <el-table-column label="车辆名称" prop="name" align="center"/>
          <el-table-column label="车辆品牌" prop="brand" align="center"/>
          <el-table-column label="车辆型号" prop="model" align="center" :formatter="modelFormatter"/>
          <el-table-column label="车辆类型" prop="type" align="center" :formatter="typeFormatter"/>
          <el-table-column label="车辆状态" prop="status" align="center" :formatter="statusFormatter"/>
          <el-table-column label="车辆颜色" prop="color" align="center"/>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="removeBindVehicle(scope.$index,scope.row.id)">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="manageDialogVisible=false">确认</el-button>
        <el-button type="info" @click="handleManageDialogClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


  <!-- 车辆绑定弹窗 -->
  <el-dialog title="车辆绑定弹窗" v-model="bindDialogVisible" width="80%" >
    <el-form label-position="top" :inline="true">
      <el-form-item label="车牌号">
        <el-input placeholder="请输入车牌号" v-model="searchVehicleInfo.license"></el-input>
      </el-form-item>
      <el-form-item label="车辆品牌">
        <el-input placeholder="请输入车辆品牌" v-model="searchVehicleInfo.brand"></el-input>
      </el-form-item>
      <el-form-item label="车辆名称">
        <el-input placeholder="请输入车辆名称" v-model="searchVehicleInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="车辆型号">
        <el-select placeholder="请选择车辆类型" v-model="searchVehicleInfo.model" style="width: 200px" clearable>
          <el-option v-for="model in vehicleModelOption" :label="model.label" :value="model.value"></el-option>
        </el-select>
        <el-icon @click="resetSearchVehicle"><Refresh /></el-icon>
      </el-form-item>
      <el-form-item >
        <el-button style="position: absolute;top: 30px" type="primary" @click="searchVehicle">检索车辆</el-button>
      </el-form-item>
    </el-form>
    <el-form>
      <el-form-item>
        <el-table ref="table" :data="vehicleInfoList" style="height:500px;overflow: auto" @selection-change="handleSelectChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" label="序号" width="70"/>
          <el-table-column label="车牌号" prop="license" align="center"/>
          <el-table-column label="车辆名称" prop="name" align="center"/>
          <el-table-column label="车辆品牌" prop="brand" align="center"/>
          <el-table-column label="车辆型号" prop="model" align="center" :formatter="modelFormatter"/>
          <el-table-column label="车辆类型" prop="type" align="center" :formatter="typeFormatter"/>
          <el-table-column label="车辆状态" prop="status" align="center" :formatter="statusFormatter"/>
          <el-table-column label="车辆颜色" prop="color" align="center"/>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="commitBindVehicle">确认</el-button>
        <el-button type="info" @click="bindDialogVisible=false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped>

</style>